<template>
  <div>
    <!--头部： 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-row>
        <el-col>
          <el-button type="primary" @click="showAddDialod">添加分类</el-button>
        </el-col>
      </el-row>
      <!-- 表格分类 区域 1.在Vue里面 安装依赖 第三方插件-vue-tabel-with-tree-grid 0.2.4-->
      <!-- 2.在main.js文件中导入Vue依赖的第三方插件vue-tabel-with-tree-grid且
                在Vue根组件上注册这个组件-Vue('tree-table'自定义名称,TreeTabel与导入时名称保持一致)----看Vue运行依赖下
      的vue-tabel-with-tree-grid 0.2.4的查看详情-Usage用法并在main.js中注册插件按照那种格式-->
      <!-- 3.看example/Example.vue的示例-查看zk-table标签里面对应方法----方法对照定义该组件的方法columns双向数据绑定：columns -->
      <!--columns属性是表格各列的配置（文档有3项配置label:列标题名称、prop：对应列内容的属性名、width：列宽度），值自定义 -->
      <!-- show-index属性是否显示数据索引  index-text属性 数据索引名称-->
      <zk-table index-text="#" :data="cateList" :columns="columns"  show-index  stripe  border  :expand-type="false"  :selection-type="false"  class="TreeTabel">
        <!-- 是否有效 -->
        <template slot="likes" slot-scope="scope">
          <!-- icon图标组件 -->
          <i class="el-icon-success" v-if="scope.row.cat_deleted==false" style="color:lightgreen;"></i>
          <i class="el-icon-error" v-else style="color:red"></i>
        </template>
        <!-- 排序 -->
        <template slot="likes1" slot-scope="scope">
          <el-tag v-if="scope.row.cat_level==0" size="mini">一级</el-tag>
          <el-tag v-else-if="scope.row.cat_level==1" size="mini" type="success">二级</el-tag>
          <el-tag v-else size="mini" type="warning">三级</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="likes2" slot-scope="scope">
          <!-- Button按钮组件 -->
          <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
        </template>
      </zk-table>
      <!--  分页区域-->
      <!-- page-sizes接受一个整型数组，数组元素为展示的选择每页显示个数的选项 data中定义的条数也要在内否则冲突-->
      <el-pagination  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="getQueryInfo.pagenum"  :page-sizes="[1, 3, 5, 10]"  :page-size="getQueryInfo.pagesize"  layout="total, sizes, prev, pager, next, jumper"  :total="total">
      </el-pagination>
    </el-card>
    <!-- 添加分类的对话框视图区域  Dialog弹出文本对话框组件  给添加按钮注册点击事件-->
    <!-- 设置visible属性，它接收Boolean，当为true时显示 Dialog -可在data中定义默认属性为false 需要具名为footer的slot  title属性用于定义标题 -->
    <!-- Form 组件提供表单验证功能，通过rules属性传入约定规则 将form-item标签里的Prop属性设置为需要校验的字段名 -->
    <!-- 添加 分类的对话框区域-->
    <!-- 外面是弹出对话框组件 里面是form组件的表单验证              @close事件-改变级联选择器选项后能自动关闭对话框且在此点击添加分类按钮进入弹出框没有看到上一次输入添加名称跟父级分类（清空）-->
    <el-dialog title="添加分类" :visible.sync="addDialogVisible" width="50%" @close="addCateDialogClosed">
      <!-- 添加分了的表单 -->
        <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
          <el-form-item label="分类名称：" prop="cat_name">
            <el-input v-model="addCateForm.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="父级分类：">
              <!-- 父级分类不需要有验证规则-删除input标签及el-form-item的prop属性，再使用组件补全el-form-item标签 ，1.父级分类为空-分类名称输入的就为1级分类，2.父级分类不为空就作为一级，分类名称输入的就是父级分类下一级（如果大家电/电视，那么分类名称输入对应就是三级分类） -->
              <!--先调用1.6.1商品列表API-获取父级分类数据列表 再使用Cascater级联选择器组件  options用来指定数据源   props.expandTrigger定义展开子级菜单的触发方式-->
              <!-- props	配置选项(value	指定选项的值为选项对象的某个属性值;label	指定选项标签为选项对象的某个属性值 expandTrigger	次级菜单的展开方式) object-->
              <el-cascader :options="parentCateList" expandTrigger='hover' :props="cateCascaderProps" v-model="selectedChangeKeys" @change="parentCateChanged"></el-cascader>
          </el-form-item>
        </el-form>  
        <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <!-- 测试弹出对话框的级联选择器选项发生改变时，输入添加分类名称 addCateForm中另外两个属性值的变化 -->
        <el-button type="primary" @click="addCates">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 查询条件
      getQueryInfo: {
        type: '3',
        pagenum: 1,
        pagesize: 5
      },
      // 商品分类的数据列表，默认为空
      cateList: [],
      // 默认商品分类条数为0
      total: 0,
      // 商品列表数据
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name'
        },
        // type类型是自定义模板  在自定义模板template标签里使用作用域插槽 根据插槽名likes 找到对应插槽
        {
          label: '是否有效',
          type: 'template', //当前列定义为模板列
          template: 'likes' //当前列模板名称
        },
        // 排序
        {
          label: '排序',
          type: 'template', //当前列定义为模板列
          template: 'likes1' //当前列模板名称
        },
        // 操作
        {
          label: '操作',
          type: 'template', //当前列定义为模板列
          template: 'likes2' //当前列模板名称
        }
      ],
      //  控制弹出对话框的显示与隐藏
      addDialogVisible: false,
      // 添加分类的表单数据对象
      addCateForm:{
      // 将要添加分类的名称
        cat_name:'',
        // 父级分类的id 默认写0   如果要添加1级分类，则父分类Id应该设置为  `0`
        cat_pid:0,
        // 分类层级-默认为一级分类`0`    `0`表示一级分类；`1`表示二级分类；`2`表示三级分类
        cat_level:0
      },
      // 添加分类表单的验证规则对象
      addCateFormRules:{
        cat_name:[
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ]
      },
      //添加数组保存要获取的父级分类列表 
      parentCateList:[],
      // 指定级联选择器的配置对象
      cateCascaderProps:{
        // 选中的父级分类对应的id
        value:'cat_id',
        // 看到的字段 就是绑定的输入分类名称里面的内容（级别取决于父级分类输入框有没有内容）
        label:'cat_name',
        // 级联选择器嵌套的属性
        children:'children'
      },
      // 级联选择器的id数组-父级分类选中数据就会把数据对应id保存到数组中
      selectedChangeKeys: [],
    }
  },
  created() {
    this.getCateList()
  },
  methods: {
    //   获取商品分类数据
    async getCateList() {
      const { data: res } = await this.$http.get('categories', {
        params: this.getQueryInfo
      })
      if (res.meta.status !== 200) {
        return this.$message.error('获取商品分类数据失败')
      }
      // console.log(res);
      console.log(res.data)
      // 把数据列表赋值给cateList
      this.cateList = res.data.result //获取到商品分类数据
      // 为总数据条数赋值
      this.total = res.data.total
    },
    handleSizeChange(NewSize) {
      console.log(NewSize)
      // 监听data 中pagesize改变
      this.getQueryInfo.pagesize = NewSize
      // 改变不同数据时 跳转到对应数据页，获取最新数据列表-调用getCateList()方法
      this.getCateList()
    },
    handleCurrentChange(NewPage) {
      console.log(NewPage)
      // 监听data 中pagenum改变
      this.getQueryInfo.pagenum = NewPage
      this.getCateList()
    },
    showAddDialod() {
      // 先获取父级分类数据列表-在放请求时获取到的父级分类数据列表 再显示弹出对话框
      this.getParentCateList()
      // 点击添加按钮时，显示弹出对话框
      this.addDialogVisible = true
      console.log(this.addDialogVisible)
    },
    // 获取父级分类列表 发送异步请求
    async getParentCateList(){
      const { data:res } = await this.$http.get('categories',{
        params:{type:2}
      })
      console.log(res);      
      if(res.meta.status !==200 ){
        return this.$message.error('获取父级分类数据列表失败')
      }
      console.log(res.data);  //获取父级分类数据列表先在显示弹出对话框里调用获取父级分类数据列表方法this.getParentCateList()，同时data中定义康数组保存获取的父级分类数据列表， 再显示弹出对话框    
      this.parentCateList = res.data
    },
    // 级联选择器选项发生改变时触发这个函数，获取到数据双向绑定
    parentCateChanged(){
      console.log(this.selectedChangeKeys); 
          //选项发生改变时： 如果 selectedChangeKeys数组中的length大于0-选中父级分类 否则没有选中
      if(this.selectedChangeKeys.lenth>0){
        // 父级分类的id 当选择父级分类不同打印结果this.selectedChangeKeys显示数组中最后1个数字 （看1.6.1文档一致）
        this.addCateForm.cat_pid = this.selectedChangeKeys[selectedChangeKeys.lenth-1]
      // 为当前分类的等级赋值   添加分类的等级就是父级分类数组长度
      this.addCateForm.cat_level = this.selectedChangeKeys.lenth
      return
      }else{//恢复成data中的默认值 
      //父级分类的id 
        this.addCateForm.cat_pid = 0
        // 为当前分类的等级赋值
        this.addCateForm.cat_level = 0
      }
    },
    // 测试：点击确定按钮打印弹出对话框表单确认的对应数据-先将确定按钮布尔值改成addCate方法 再来methods里定义事件处理函数
    // 点击按钮 添加新的分类
    addCates(){
      // console.log(this.addCateForm)
      // 进入弹出对话框 对表单进行预校验 先拿到调用表但的引用再调用validate（）方法，传1个回调函数值-代表预校验结果通过与否，接着判断
      this.$refs.addCateFormRef.validate(async vali=>{
        // 预校验通过后调用后台API接口1.6.2 post请求期间是在请求体中向服务器发送/传递参数：addCateForm的3个参数
      if(!vali)
        return//预校验未通过
        const { data:res } = await this.$http.post('categories',this.addCateForm)//预校验通过后发送请求
      if(res.meta.status !==201 ){
        return this.$message.error('添加分类失败！')
      }
      // 添加分类成功 还需要清空表单数据/刷新数据列表 隐藏添加的对话框
      this.$message.success('添加分类成功！')
      this.getCateList()
      this.addDialogVisible=false
      })
    },
    // 监听对话框的事件 重置表单数据-使用resetFields()方法重置关闭弹出框后类再次进入添加分为空 后三项是重置父级分类也为空
    addCateDialogClosed(){
      this.$refs.addCateFormRef.resetFields()//拿到调用表单的引用（这里的引用是ref属性值addCateFormRef）this.$refs.addCateFormRef  addCateFormRef是在表单中定义的ref方法
      this.selectedChangeKeys = []
      this.selectedChangeKeys.cat_pid = 0
      this.selectedChangeKeys.cat_level = 0
    }
  }
}
</script>
<style lang="less" scoped>
.TreeTabel {
  margin-top: 15px;
}
</style>